<template>
  <div class="index">
    <div class="swiper">
      <!-- <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="item in banner" :key="item.id">
            <img src="@/assets/banner.png" alt="" />
          </div>
        </div>
      </div> -->
      <el-carousel trigger="click">
        <el-carousel-item v-for="item in banner" :key="item.id">
          <img src="@/assets/banner.png" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="list-content" v-for="item in eventsList" :key="item.id">
      <div class="wrap">
        <div class="upper">
          <div class="title">
            <p>{{ item.title_cn }}</p>
            <span>{{ item.date }} 地点：{{ item.location }}</span>
            <router-link
              :to="{
                path: '/eventList',
                query: {
                  id: item.id,
                },
              }"
              class="more"
            >
              More >
            </router-link>
          </div>
        </div>
        <div class="list">
          <div class="col" v-for="col in item.images" :key="col.id">
            <router-link
              :to="{
                path: '/eventDetail',
                query: {
                  id: col.id,
                },
              }"
            >
              <div class="item imgDiv">
                <img :src="col.image_url" alt="" />
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <div class="wrap">
      <div class="Schedule">
        <div class="upper">
          <div class="title">
            <p>赛事日程</p>
          </div>
        </div>
        <el-tabs v-model="month" @tab-click="handleClick">
          <el-tab-pane
            v-for="item in scheduleList"
            :key="item.month"
            :label="item.month"
            :name="item.month"
          >
            <el-table
              :data="item.events"
              style="width: 100%"
              :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }"
              @row-click="handleRowClick"
            >
              <el-table-column prop="date" label="开赛时间"> </el-table-column>
              <el-table-column prop="location" label="赛事地点">
              </el-table-column>
              <el-table-column
                prop="event_status"
                label="赛事状态"
              ></el-table-column>
              <el-table-column prop="remark" label="其他"> </el-table-column>
              <el-table-column prop="address" label="赛事图片" width="100">
                <template slot-scope="scope">
                  <img :src="scope.row.image" alt="" />
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="exchange">
        <div class="upper">
          <div class="title">
            <p>赛事交流</p>
          </div>
        </div>
        <div class="list">
          <div class="col" v-for="item in exchangeList" :key="item.id">
            <div class="upper">
              <div class="left">
                <div class="avatar">
                  <img :src="item.avatar" alt="" />
                </div>
                <div class="name">
                  <p>{{ item.nickname }}</p>
                  <span>{{ item.publishtime_text }}</span>
                </div>
              </div>
              <div
                class="right pointer active"
                @click="follow(item)"
                v-if="item.follow === 1"
              >
                已关注
              </div>
              <div class="right pointer" @click="follow(item)" v-else>关注</div>
            </div>
            <div class="content ovh2">{{ item.content }}</div>
            <div class="imgList">
              <div class="item" v-for="img in item.images" :key="img">
                <div class="imgDiv">
                  <img :src="img" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper"; // 注意引入的是Swiper
import "swiper/css/swiper.min.css"; // 注意这里的引入
import { mapState } from "vuex";
export default {
  name: "NavBar",
  data() {
    return {
      banner: [],
      eventsList: [],
      scheduleList: [],
      exchangeList: [],
      month: "",
    };
  },
  computed: {
    ...mapState(["site"]),
  },
  mounted() {
    this.getBanner();
    this.getEvents();
    this.getSchedule();
    this.getExchange();
  },
  methods: {
    getBanner() {
      this.$post("/index/banner").then((res) => {
        this.banner = res.data;
        // this.getSwiper();
      });
    },
    getSwiper() {
      this.swiper = new Swiper(".swiper-container", {
        loop: true, // 无缝
        autoplay: {
          //自动开始
          delay: 3000, //时间间隔
          disableOnInteraction: false, //*手动操作轮播图后不会暂停*
        },
        effect: "fade",
        observer: true,
        observeParents: true,
      });
    },
    getEvents() {
      this.$post("/index/events").then((res) => {
        this.eventsList = res.data;
      });
    },
    getSchedule() {
      this.$post("/index/schedule").then((res) => {
        this.scheduleList = res.data;
        this.month = this.scheduleList[0].month;
      });
    },
    handleRowClick(row) {
      location.href = `/eventList?id=${row.id}`;
    },
    getExchange() {
      this.$post("/index/exchanges").then((res) => {
        this.exchangeList = res.data;
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    follow(item) {
      let that = this;
      this.$post("/user/follow", { follow_id: item.user_id }).then((res) => {
        if (res.code == 1) {
          if (res.data.result === "Y") {
            item.follow = 1;
            that.$message.success("关注成功");
          }
          if (res.data.result === "N") {
            item.follow = 0;
            that.$message.error("取消关注");
          }
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.swiper {
  height: 1000px;
  img {
    height: 100%;
  }
  :deep .el-carousel {
    height: 100%;
    .el-carousel__container {
      height: 100%;
    }
  }
}
.title {
  text-align: center;
  position: relative;
  margin-bottom: 40px;
  p {
    font-weight: bold;
    font-size: 48px;
  }
  .more {
    position: absolute;
    right: 0%;
    bottom: 10px;
  }
}
.list-content {
  padding: 40px 0 90px;
  background: url("@/assets/index-bg.png") bottom center no-repeat;
  background-size: 100%;

  .list {
    display: flex;
    flex-wrap: wrap;
    margin: -8px;
    .col {
      width: calc(100% / 3);
      padding: 8px;
      .imgDiv {
        border-radius: 20px;
      }
    }
  }
}

.Schedule {
  padding: 50px 0;
}
:deep .el-tabs {
  .el-tabs__item.is-active {
    color: #441054;
  }
  .el-tabs__item {
    font-size: 24px;
    font-weight: bold;
    padding: 0 50px;
  }
  .el-tabs__nav-wrap::after {
    background-color: transparent;
  }
  .el-tabs__active-bar {
    background-color: transparent;
  }
  .el-tabs__item:hover {
    color: #441054;
  }
}
// 赛事交流
.exchange {
  .list {
    .col {
      padding: 50px 0;
      border-top: 2px dotted #999;
      &:first-child {
        border-top: none;
      }
      .upper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          display: flex;
          align-items: center;
        }
        .right {
          color: #fff;
          background: #917bbd;
          padding: 6px 30px;
          font-size: 18px;
          border-radius: 10px;
        }
        .right.active {
          background-color: #999999;
        }
        .avatar {
          width: 134px;
          height: 135px;
          border-radius: 50%;
          overflow: hidden;
        }
        .name {
          padding-left: 34px;
          p {
            font-size: 30px;
          }
          span {
            color: #999;
          }
        }
      }
      .content {
        color: #999;
        margin: 30px 0;
      }
      .imgList {
        display: flex;
        flex-wrap: wrap;
        margin: -8px;
        .item {
          width: calc(100% / 3);
          padding: 8px;
          .imgDiv {
            border-radius: 10px;
            height: 290px;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1024px) {
  .swiper {
    height: 600px;
  }
  .title {
    padding-bottom: 25px;
    .more {
      position: absolute;
      right: 0%;
      bottom: 0;
    }
  }
  .title p {
    font-size: 32px;
  }
  .exchange .list .col .content {
    margin: 16px 0;
  }
  .exchange .list .col .upper .name p {
    font-size: 24px;
  }
  .exchange .list .col .upper .name {
    padding-left: 20px;
  }
  .exchange .list .col .upper .avatar {
    width: 100px;
    height: 100px;
  }
}
@media screen and (max-width: 768px) {
  .swiper {
    height: 300px;
  }
  .title p {
    font-size: 22px;
  }
  .list-content .list .col .imgDiv {
    border-radius: 6px;
  }
  :deep .el-tabs .el-tabs__item {
    font-size: 16px;
    padding: 0 16px;
  }
  .list-content {
    padding: 30px 0 45px;
  }
  .exchange .list .col {
    padding: 24px 0;
  }
  .exchange .list .col .upper .avatar {
    width: 60px;
    height: 60px;
  }
  .exchange .list .col .upper .name {
    padding-left: 14px;
  }
  .exchange .list .col .upper .name p {
    font-size: 18px;
  }
  .exchange .list .col .upper .right[data-v-a83bd3b0] {
    padding: 5px 18px;
    font-size: 14px;
    border-radius: 6px;
  }
  .exchange .list .col .imgList .item .imgDiv {
    border-radius: 6px;
    height: 120px;
  }
}
</style>
